<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">用户列表</div>
						<!-- <div><el-button type="success" class="book-add" @click="dialogVisible = true">商品添加</el-button></div> -->
					</el-header>
					<el-table :data='list' style='width: 100%;' max-height="480" border v-loading="isLoading">
						<!-- 名称 -->
						<el-table-column label='用户头像'>
							<template v-slot="scope">
								<div style="width: 70px;height: 70px;">
									<!-- <el-image> -->
									<el-image lazy :src="`${$Imgurl}/api/public/showImg/${scope.row.img}`"
										style="width: 50px;height: 50px;"></el-image>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop='nickname' label='用户名称'></el-table-column>
						<el-table-column label="角色">
							<template #default="scope">
								<p>{{ frole(scope.row.role) }}</p>
							</template>
						</el-table-column>
						<el-table-column label="帐号" prop="account"></el-table-column>
						<el-table-column label="电话" prop="phone"></el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<span :class="{ closed: scope.row.closed == 0 }">{{
									fclosed(scope.row.closed)
								}}</span>
							</template>
						</el-table-column>
						<el-table-column prop='but' label='操作' fixed="right" width="200">
							<template v-slot="scope">
								<el-button type="danger"
									@click="freezeUser(scope.row.account, scope.row.id, scope.row.closed)">冻结</el-button>
								<el-button type="warning" @click="thawUser(scope.row.account, scope.row.id)">解冻</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
			</el-container>

		</div>
		<!-- 分页 -->
		<div class="book-pagination">
			<el-pagination background layout="prev, pager, next" :total="total" :page-size='num' @current-change='listbut'>
			</el-pagination>
		</div>

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			list: [],
			total: 0,
			num: 10,
			closed: "",
			showLoading: showLoading
		}
	},
	methods: {

		//点击切换到指定页数
		listbut (x) {
			this.isLoading = true;
			let start = 0;
			//当页数小于等于1时,条数从0开始请求,否则就是从(页数 * 条数 - 条数)处开始请求。
			x <= 1 ? (start = 0) : (start = x * this.num - this.num);

			//分页请求地址
			let pages = `api/adm/user/findAll?start=${start}&num=${this.num}`;
			this.axios.get(pages)
				.then((res) => {

					if (res.status === 200) {
						this.list = res.data.data.users; //数据
						this.total = res.data.data.total; //总条数
						this.showLoading();
					}

				})
				.catch((error) => {
					console.log(error);
				});
		},



		//默认请求的数据
		getUser () {
			this.isLoading = true;
			let start = 0;
			let num = 10;
			let user = `api/adm/user/findAll?start=${start}&num=${num}`;
			this.axios.get(user)
				.then((res) => {
					if (res.status === 200) {
						this.list = res.data.data.users;
						this.total = res.data.data.total;
						this.showLoading();
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},


		//冻结
		freezeUser (account, index) {
			this.isLoading = true;
			let id = account;
			this.axios.post(`/api/adm/user/close/${index}`, id)
				.then((res) => {
					if (res.status === 200) {
						//冻结成功,重新查询数组
						this.getUser();
						this.$message({
							duration: 1000,
							message: "冻结成功",
							type: "success",
						});
						this.showLoading();
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},

		//解冻
		thawUser (account, index) {
			this.isLoading = true;
			let id = account;
			this.axios.post(`/api/adm/user/resetPwd/${index}`, id)
				.then((res) => {
					if (res.status === 200) {
						//解冻成功,重新查询数组
						this.getUser();
						this.$message({
							duration: 1000,
							message: "解冻成功",
							type: "success",
						});
						this.showLoading();
					}
				})
				.catch((error) => {
					console.log(error);
				});
		},

	},




	computed: {
		//冻结
		fclosed () {
			return function (x) {
				return x == 0 ? (x = "已激活") : (x = "已冻结");
			};
		},
		//角色
		frole () {
			return function (x) {
				return x == "G" ? (x = "管理员") : (x = "普通用户");
			};
		},
	},

	created () {
		this.getUser();
	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}
</style>






<!-- <template>
	<div id="adm5">
		<el-table :data="user" border style="width: 75%">
		<el-table-column prop="id" label="编号"></el-table-column>
		<el-table-column prop="nickname" label="用户名称"></el-table-column>
		<el-table-column prop="phone" label="电话"></el-table-column>
		<el-table-column prop="account" label="账号"></el-table-column>
		<el-table-column label="图片" v-slot="scope">
			<el-image :src="`${$Imgurl}/api/public/showImg/${scope.row.img}`" />
		</el-table-column>
		<el-table-column label="操作">
			<template #default="scope">
				<el-button @click="fezze(scope.row.id)">冻结</el-button>
				<el-button @click="again(scope.row.id)">密码重置</el-button>
			</template>
		</el-table-column>	
	  </el-table>
	</div>
</template>

<script>
	export default {
		name: 'Adm5',
		props: [],
		data() {
			return {
				user : []
			}
		},
		created(){
			this.axios.get('/api/adm/user/findAll').then((res)=>{
				this.user=res.data.data.users
				console.log(this.user)
			}).catch((error)=>{
				console.log(error)
			})
		},
		methods: {
			fezze(id){
				this.axios.get('/api/adm/user/close/'+id).then((res)=>{
					alert(res.data.msg)
				}).catch((error)=>{
					console.log(error)
				})
			},
			again(id){
				this.axios.get('/api/adm/user/resetPwd/'+id).then((res)=>{
					alert(res.data.msg)
				}).catch((error)=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>

</style> -->


<style scoped>
.book-pagination {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	margin-bottom: 10px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}

.closed {
	color: green !important;
}
</style>
